<template>
	<view class="home-index">
		<view class="nav">
			<view class="nav-bg" :style="[{ opacity: opacityVal}]"></view>
			<u-navbar :fixed="false" bgColor="transparent" leftIconColor="#fff" :autoBack="true">
			</u-navbar>
		</view>
		<view style="position: relative;">
			<image src="https://bhzhtc.oss-cn-beijing.aliyuncs.com/sxsd/33ebe7c8e4a6431c830166611fc17fa8.png"
				style="width: 750rpx;" mode="widthFix"></image>
			<view class="home-total">
				<view>今日营业额</view>
				<view style="font-size: 38rpx;margin-top: 10rpx;">￥{{numData.totalAmount}}</view>
			</view>
		</view>
		<view class="home-tab">
			<view class="tab-item">
				<view>{{numData.goodsNum}}</view>
				<view style="font-size: 23rpx;color: #999999;margin-top: 10rpx;">销售商品(件)</view>
			</view>
			<view class="tab-item">
				<view>{{numData.totalAmount}}</view>
				<view style="font-size: 23rpx;color: #999999;margin-top: 10rpx;">销售金额(元)</view>
			</view>
			<view class="tab-item">
				<view>{{numData.onSales}}</view>
				<view style="font-size: 23rpx;color: #999999;margin-top: 10rpx;">在售商品(件)</view>
			</view>
			<view class="tab-item">
				<view>{{numData.offSales}}</view>
				<view style="font-size: 23rpx;color: #999999;margin-top: 10rpx;">下架商品(件)</view>
			</view>
		</view>
		<u-sticky bgColor="transparent" :offsetTop="offsetTop">
			<tui-tabs :tabs="tabList" :backgroundColor="backgroundColor" :currentTab="currentTab"
				selectedColor="#2FCC71" sliderBgColor="#2FCC71" @change="changeTab" itemWidth="33.33%"></tui-tabs>
		</u-sticky>

		<view class="item-list">
			<view class="goods-list" v-for="(item, index) in goodList" :key="index">
				<view class="goods-list__box">
					<image class="goods-list__box__image" :src="item.recPic" mode="widthFix"></image>
					<view class="goods-list__box__right">
						<view class="goods-list__box__top">
							<view class="goods-list__box__title">{{ item.goodsName }}</view>
						</view>
						<view class="goods-list__box__bot">规格：{{item.spc}}</view>
						<!-- <view style="display: flex;align-items: center;">
							<view class="goods-list__box__bot">数量：{{item.count}}</view>
						</view> -->
						<view style="display: flex;align-items: center;">
							<view class="goods-list__box__bot">单价：{{item.unitPrice}}</view>
							<view class="goods-list__box__bot" style="margin-left: 15rpx;">数量：{{item.count}}</view>
						</view>
						<view class="goods-list__box__bot">重量：{{item.weight}}斤
						</view>
						<!-- <view class="goods-list__box__bot">供应商：{{item.supplierName}}</view> -->
					</view>
				</view>
				<!-- <u-line color="#d8d8d8"></u-line>
				<view class="supplier-data">
					<view>名称：{{item.supplierName}}</view>
					<view style="margin-left: 23rpx;">联系人：{{item.supplierContacts}}</view>
					<view style="margin-left: 23rpx;">电话：{{item.supplierPhone}}
					</view>
				</view>
				<view class="supplier-data" style="margin-top: 15rpx;">
					<view>地址：{{item.supplierAddress}}</view>
				</view> -->
				<view class="item-price">￥{{ (item.weight * item.unitPrice).toFixed(2) }}</view>
				<view class="item-but">
					<view v-if="item.status==0" class="look-detail" @click.stop="showPop(item)">
						确认信息
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="show=false" mode="top" bgColor="transparent">
			<view class="pop-con">
				<view style="font-size: 33rpx;width: 100%;text-align: center;">确认商品信息</view>
				<view class="pop-midle">
					<image src="https://bhzhtc.oss-cn-beijing.aliyuncs.com/sxsd/df6feeec57d04847b1a27948e956eade.png"
						style="width: 165rpx;height: 165rpx;flex-shrink: 0;border-radius: 19rpx;"></image>
					<view class="middle-right">
						<view class="mimdle-title">
							<u-text :lines="2" :text="pageData.goodsName"></u-text>
						</view>
						<!-- <view class="title-other">单价：{{pageData.unitPrice}}元</view> -->
						<view style="display: flex;align-items: center;">
							<view class="title-other">规格：{{pageData.spc}}</view>
							<view style="color: #E93325;margin-left: auto;">
								￥{{ (pageData.weight * pageData.unitPrice).toFixed(2) }}</view>
						</view>
					</view>
				</view>
				<view class="flex-row" style="margin-top: 46rpx;">
					<view>商品数量<text style="color: #999999;font-size: 25rpx;"></text></view>
					<view class="flex-row"
						style="margin-left: auto;width: 352rpx;background-color: #F7F7F7;height: 72rpx;border-radius: 4px;padding: 0 31rpx;">
						<u-input type="number" v-model="pageData.count" inputAlign="right" fontSize="13px"
							placeholder="请输入商品数量" border="none"></u-input>
					</view>
				</view>
				<view class="flex-row" style="margin-top: 31rpx;">
					<view>商品重量<text style="color: #999999;font-size: 25rpx;">(斤)</text></view>
					<view class="flex-row"
						style="margin-left: auto;width: 352rpx;background-color: #F7F7F7;height: 72rpx;border-radius: 4px;padding: 0 31rpx;">
						<u-input type="number" v-model="pageData.weight" fontSize="13px" inputAlign="right"
							placeholder="请输入商品重量" border="none"></u-input>
					</view>
				</view>
				<view class="flex-row" style="margin-top: 46rpx;justify-content: space-between;">
					<view class="but-cal" @click="show=false">取消</view>
					<view class="but-cal" style="border: none;background-color: #2FCC71;color:#FFFFFF;"
						@click="submitForm">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numData: {},
				pageNum: 1,
				pageSize: 100,
				goodList: [],
				pageData: {},
				number: '',
				show: false,
				currentTab: 0,
				status: 0,
				tabList: [{
						name: '待确认',
						type: '0'
					},
					{
						name: '已确认',
						type: "10"
					},
					{
						name: '全部',
						type: null
					},
				],
			}
		},
		props: {
			opacityVal: {
				type: Number,
				default: 0
			},
			offsetTop: {
				type: Number,
				default: 88
			},
			backgroundColor: {
				type: String,
				default: '#ffffff'
			},

		},
		created() {
			this.getList()
			this.getIndex()
		},
		methods: {
			async getList() {
				let res = []
				if (this.currentTab === 2) {
					res = await this.$apis.procurement.shopPurchaseItem({
						pageNum: this.pageNum,
						pageSize: this.pageSize,

					})
				} else {
					res = await this.$apis.procurement.shopPurchaseItem({
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						status: this.status,
					})
				}

				this.goodList = res.rows
				console.log(111, this.goodList);
			},
			showPop(item) {
				this.pageData = JSON.parse(JSON.stringify(item))
				this.show = true
			},
			async getIndex() {
				let res = await this.$apis.procurement.shopIndex()
				this.numData = res.data
			},
			async submitForm() {
				let arr = []
				arr.push({
					unitPrice: this.pageData.unitPrice,
					goodsId: this.pageData.goodsId,
					weight: this.pageData.weight,
					id: this.pageData.id,
					purchaseId: this.pageData.purchaseId,
				})
				let res = await this.$apis.procurement.shopupdatePurchaseItem(JSON.stringify(arr))
				this.getList()
				this.show = false
			},
			changeTab(e) {
				this.currentTab = e.index
				this.status = this.tabList[e.index].type
				this.goodList = []
				this.getList()
			},
		}
	}
</script>

<style lang="scss">
	.nav {
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	.nav-bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #2FCC71;
	}

	.flex-row {
		display: flex;
		align-items: center;
	}

	.pop-con {
		width: 604rpx;
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		padding: 46rpx;
		box-sizing: border-box;
		font-weight: 500;
		color: #333333;
		font-size: 28rpx;
		padding-top: 100px;
	}

	.pop-midle {
		margin-top: 31rpx;
		display: flex;
	}

	.middle-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 15rpx;
		flex: 1;
	}

	.mimdle-title {
		width: 100%;
	}

	.title-other {
		font-weight: 400;
		color: #999999;
		font-size: 25rpx;
	}

	.supplier-data {
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 23rpx;
		margin-top: 23rpx;
	}

	.but-cal {
		width: 246rpx;
		height: 85rpx;
		border-radius: 42rpx;
		border: 1px solid #DEDEDE;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 28rpx;
	}

	.home-total {
		position: absolute;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: 200rpx;
		left: 0;
		color: #FFFFFF;
		font-size: 31rpx;
	}

	.home-tab {
		position: relative;
		width: 688rpx;
		padding: 31rpx 0;
		background: #FFFFFF;
		border-radius: 19rpx;
		margin: 0 auto;
		margin-top: -130rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 31rpx;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #333333;
		font-size: 31rpx;
	}

	.item-list {
		width: 688rpx;
		margin: 0 auto;

	}

	.goods-list {
		margin-top: 31rpx;
		width: 688rpx;
		padding: 23rpx;
		background-color: #FFFFFF;
		border-radius: 19rpx;
		box-sizing: border-box;
		position: relative;

		.item-price {
			color: #E93325;
			font-size: 28rpx;
			font-weight: 500;
			position: absolute;
			top: 23rpx;
			right: 23rpx;
		}

		.goods-list__box {

			display: flex;

			.goods-list__box__image {
				width: 192rpx;
				height: 192rpx;
				border-radius: 12rpx;
				flex-shrink: 0;
			}

			.goods-list__box__right {
				flex: 1;
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.goods-list__box__top {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.goods-list__box__title {

				width: 300rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-list__box__bot {
				color: #999999;
				font-size: 23rpx;
			}




		}

		.item-but {
			display: flex;
			margin-top: 15rpx;
			justify-content: flex-end;
		}

		.look-detail {
			width: 162rpx;
			height: 58rpx;
			background: #2FCC71;
			border-radius: 29rpx;
			font-size: 23rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.home-index ::v-deep .u-input {
		height: 58rpx !important;
	}
</style>